<script>

function openRel()
{
	$(".bg_transp").show();
	
	$.ajax({
		type: "post",
		url: 'relatorio/diario',
		data: "data=" + $("#date_imp").val() + "&inicio=" + $("#date_ini").val() + "&fim=" + $("#date_fim").val(),
		success: function(r){
			$(".bg_rel").fadeIn('fast');
			$('.rel_mostra').html(r);
		}
	});
}

function openRelCa()
{
	$(".bg_transp").show();
	
	$.ajax({
		type: "post",
		url: 'relatorio/caixa',
		data: "data=" + $("#date_imp_ca").val() + "&inicio=" + $("#date_ini_ca").val() + "&fim=" + $("#date_fim_ca").val(),
		success: function(r){
			$(".bg_rel").fadeIn('fast');
			$('.rel_mostra').html(r);
		}
	});
}

$(function(){
	$('.date').datepicker({
		changeMonth: true,
		changeYear: true
	});

	var dates = $('#date_fim, #date_ini').datepicker({
		defaultDate: "+1w",
		changeMonth: true,
		numberOfMonths: 3
	});

});
</script>

<div style="width: 800px; position: relative; margin: 0 auto;">
	<div style="font-size: 22px; color: #FF9900; text-align: left;">
		Relatorios
	</div>
	<hr style="border-top: 1px dashed #FF9900; margin-top: 5px; margin-bottom: 5px;" />
	<div class="ui-corner-all" style="border: 1px solid gray; padding: 10px; padding-top: 5px; margin-top: 10px;">
		<div style="font-size: 14px;">
			Funcionarios
		</div>
		<hr style="border-top: 1px dotted gray;" />
		<table>
			<tr>
				<td>
					<div class="ui-corner-all button" onclick="$('#data_rel').fadeIn('fast');" style="padding: 15px; position: relative; z-index: 1; font-size: 18px; ">
						<div>
							Diario
						</div>
					</div>
				</td>
				<td>
					&nbsp;
					<div style="display: none;" id="data_rel">
						<input type="text" id="date_imp" class="date" />
						<img onclick="openRel();" src="public/images/actions/rel.png" />
					</div>
				</td>
				<td>
					<div class="ui-corner-all button" onclick="$('#data_rel_per').fadeIn('fast');" style="padding: 15px; position: relative; z-index: 1; font-size: 18px; ">
						<div>
							Periodo
						</div>
					</div>		
				</td>
				<td>
					&nbsp;
					<div style="display: none;" id="data_rel_per">
						De<input type="text" id="date_ini" />
						Ate<input type="text" id="date_fim" />
						<img onclick="openRel();" src="public/images/actions/rel.png" />
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div class="ui-corner-all" style="border: 1px solid gray; padding: 10px; padding-top: 5px; margin-top: 10px;">
		<div style="font-size: 14px;">
			Caixa
		</div>
		<hr style="border-top: 1px dotted gray;" />
		<table>
			<tr>
				<td>
					<div class="ui-corner-all button" onclick="$('#step1-rel').fadeIn('fast');" style="padding: 15px; position: relative; z-index: 1; font-size: 18px; ">
						<div>
							Diario relhauhea
						</div>
					</div>
				</td>
				<td>
	
				</td>
				<td>
					<div class="ui-corner-all button" onclick="$('#data_rel_per_ca').fadeIn('fast');" style="padding: 15px; position: relative; z-index: 1; font-size: 18px; ">
						<div>
							Periodo
						</div>
					</div>		
				</td>
				<td>
					&nbsp;
					<div style="display: none;" id="data_rel_per_ca">
						De<input type="text" id="date_ini_ca" />
						Ate<input type="text" id="date_fim_ca" />
						<img onclick="openRelCa();" src="public/images/actions/rel.png" />
					</div>
				</td>
				<td>
					<div class="ui-corner-all button" onclick="$('#data_rel_per_ca').fadeIn('fast');" style="padding: 15px; position: relative; z-index: 1; font-size: 18px; ">
						<div>
							Forma de Pagamento
						</div>
					</div>		
				</td>
				<td>
					&nbsp;
					<div style="display: none;" id="data_rel_per_ca">
						De<input type="text" id="date_ini_ca" />
						Ate<input type="text" id="date_fim_ca" />
						<img onclick="openRelCa();" src="public/images/actions/rel.png" />
					</div>
				</td>
			</tr>
		</table>
	</div>
</div>

<div id="step1-rel" class="ui-corner-all bg_rel" style="padding: 5px; background-color: white; display: none; border: 1px solid gray; border-top: 3px solid gray; background-repeat: repeat-x; position: fixed; top: 10px; left: 25px; z-index: 9; width: 500px; left: 50%; margin-left: -250px; font-size: 16px; margin-top: -3px; ">
	<div id="titlekeyNum" class="ui-widget ui-corner-all" style="font-size: 22px; text-align: left; color: gray">
		Relatorio diario do caixa
	</div>
	<hr style="border-top: 1px dashed gray; margin-top: 5px; margin-bottom: 5px;" />
	<div style="" id="data_rel_ca">
		Data: <input type="text" id="date_imp_ca" class="date" />
	</div>
	<hr style="margin: 10px 0 10px 0;" />
	<div>
		<div class="button ui-corner-all" onclick="openRelCa();" style="text-align: center; float: left; padding: 20px; width: 201px;">
			<div style="position: absolute; margin-top: -9px; margin-left: -10px;">
				<img src="public/images/actions/yes.png" />
			</div>
			<b>Continuar</b>
		</div>
		<div class="button ui-corner-all" onclick="$('.bg_transp').hide(); $('#step1-rel').hide();" style="text-align: center; padding: 20px; margin-left: 256px; width: 201px;">
			<div style="position: absolute; margin-top: -9px; margin-left: -10px;">
				<img src="public/images/actions/delete.png" />
			</div>
			<b>Cancelar</b>
		</div>
	</div>
</div>

<div class="ui-corner-all bg_rel" style="padding: 5px; background-color: white; display: none; border: 1px solid gray; border-top: 3px solid gray; background-repeat: repeat-x; position: fixed; top: 10px; left: 25px; z-index: 9; background-image: url('public/images/bg_menu.png'); width: 600px; left: 50%; margin-left: -300px; font-size: 18px; margin-top: -3px; ">
	<div class="ui-corner-all" onclick="$('.bg_transp').hide(); $('.bg_rel').hide();" style="position: relative; float: right; border: 1px solid gray; padding: 4px; margin-right: 0; border-bottom: 2px solid gray; border-right: 2px solid gray;">
		Fechar
	</div>
	<div class="rel_mostra">
	
	</div>
</div>